<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<body>
		name：<input id="name" type="text" name="cname"><br>
		sex：<input id="sex" type="radio" value="true" checked="checked" name="sex"/>男
			<input id="sex" type="radio" value="false" name="sex"/>女<br>
		sal:<input id="sal" type="number" name="sal"><br>
		birth:<input id="date" type="date" name="birth"><br>
		<button id="submit">提交</button>

<table id="tableId" class="table table-bordered">

</table>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="display:none">
  修改
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>	
</body>
<script type="text/javascript">
$(function(){
	$("#submit").on("click",function(){
		var cname = $("input").eq(0).val();   
		var sex = $('input:radio:checked').val();
		var sal = $("input").eq(3).val();
		var birth = $("input").eq(4).val();
		var customer = {cname:cname, sex:sex, sal:sal, birth:birth};
		
		var json = JSON.stringify(customer);
		$.ajax({
			type:"POST",
			url:"addCustomer",
			data:json,
			contentType:"application/json"
		}).done(function(data){
			createTable(data);
		});
	});
});


function createTable(data){
	i = 0;
	var tr = $("<tr>");
	$("#tableId").append(tr);
	tr.append($("<td>").text(data.cname));
	var sex = '男';
	if(!data.sex)
		sex = '女';
	tr.append($("<td>").text(sex));
	tr.append($("<td>").text(data.sal));
	tr.append($("<td>").text(dateFormat(data.birth)));
	tr.append($("<td>").append($('<button class="">del</button>').attr("id", data.id)));
	delListener();
}

function delListener(){
	$("#tableId button").on("click", function(e){
		var x = $(this).attr("id");
        $.ajax({
            type:"POST",
            url:"deleteCustomer?id=" + x,
        }).done(function(msg){
            var id="#"+x;
            var p = $(id).parent().parent().remove();
        });
    });
}
function dateFormat(time){
    var birth = new Date(time);
    var month = birth.getMonth()+1;
    if (birth.getMonth()+1<10){
        var month = "0" + (birth.getMonth()+1);
    }
    var dat = birth.getDate();
    if (birth.getDate() < 10){
        var dat = "0" + birth.getDate();
    }
    return birth.getFullYear()+"-"+month+"-"+dat;
}
</script>
</html>